<!-- 商城订单列表 -->
<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex == index}"
			 @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
					<!-- 空白页 -->
					<empty v-if="emptyShow" :custom="true" src="../../static/images/no-orders.png" text="您还没有订单记录哦，快去前往消费"></empty>

					<!-- 订单列表 -->
					<navigator v-for="(items,index) in ordersList" :key="index" :url="'/mall/order/orderDetail?id='+items.order_id"
					 hover-class="none">
						<view class="order-item">
							<view class="i-top b-b" @tap.stop="goStore(items.seller_id)">
								<image class="seller_logo" :src="items.online_logo" mode=""></image>
								<text class="seller_name clamp">{{items.online_name}}</text>
								<text class="yticon icon-you"></text>
								<text class="state">{{items._status._title}}</text>
							</view>

							<scroll-view v-if="items.cartInfo.length > 1" class="goods-box" scroll-x>
								<view v-for="(goodsItem, goodsIndex) in items.cartInfo" :key="goodsIndex" class="goods-item" @tap.stop="goGoods(goodsItem.product_id,items.order_type)">
									<image v-if="goodsItem.productInfo.attrInfo" class="goods-img" :src="goodsItem.productInfo.attrInfo.image"
									 mode="aspectFill"></image>
									<image v-else class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
								</view>
							</scroll-view>
							<view v-if="items.cartInfo.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in items.cartInfo"
							 :key="goodsIndex">
								<image class="goods-img" v-if="goodsItem.productInfo.attrInfo" :src="goodsItem.productInfo.attrInfo.image" mode="aspectFill"
								 @tap.stop="goGoods(goodsItem.product_id)"></image>
								<image class="goods-img" v-else :src="goodsItem.productInfo.image" mode="aspectFill" @tap.stop="goGoods(goodsItem.product_id,items.order_type)"></image>
								<view class="right">
									<text class="title clamp">{{goodsItem.productInfo.store_name}}</text>
									<view class="attr-box">
										<text>{{goodsItem.productInfo.attrInfo?goodsItem.productInfo.attrInfo.suk:''}}</text>
										<text>x {{goodsItem.cart_num}}</text>
									</view>
									<text class="price" v-if="goodsItem.productInfo.attrInfo">{{goodsItem.productInfo.attrInfo.price}}</text>
									<text class="price" v-else>{{goodsItem.productInfo.price}}</text>
								</view>
							</view>

							<view class="price-box">
								共
								<text class="num">{{items.total_num}}</text>
								件商品 实付款
								<text class="price">{{items.pay_price}}</text>
							</view>
							<!-- 待支付 -->
							<view class="action-box b-t" v-if="items.paid == 0">
								<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
								<button class="action-btn" @tap.stop="cancelOrder(items.order_id)">取消订单</button>
								<button class="action-btn recom" @tap.stop="checkMoney(items)">立即支付</button>
							</view>
							<!-- 待发货 -->
							<view class="action-box b-t" v-if="items.status == 0&&items.paid == 1">
								<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
								<button class="action-btn" @tap.stop="refund(items)" v-if=" items.order_type !=='cili'">申请退款</button>
							</view>
							<!-- 待收货 -->
							<view class="action-box b-t" v-if="items.status == 1">
								<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
								<!-- <button class="action-btn" @tap.stop="againBuy(items.order_id)">再次购买</button> -->
								<button class="action-btn" @tap.stop="express(items.order_id)">查看物流</button>
								<button class="action-btn recom" v-if="items.order_type=='normal' || items.order_type=='cili'" @tap.stop="queren(items.order_id,items.is_return)">确认收货</button>
								<button class="action-btn recom" v-if="items.order_type=='service_station'" @tap.stop="queren(items.order_id,items.is_return)">确认使用</button>
							</view>
							<!-- 待评价 -->
							<view class="action-box b-t" v-if="items.status == 2">
								<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
								<!-- <button class="action-btn" @tap.stop="againBuy(item.id)">申请开票</button> -->
								<!-- <button class="action-btn" @tap.stop="againBuy(items.order_id)">再次购买</button> -->
								<button class="action-btn" @tap.stop="express(items.order_id)">查看物流</button>
								<button class="action-btn recom" @tap.stop="goComment(items.order_id)">立即评价</button>
							</view>
							<!-- 已完成 -->
							<view class="action-box b-t" v-if="items.status == 3">
								<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
								<!-- <button class="action-btn" @tap.stop="againBuy(item.id)">申请开票</button> -->
								<button class="action-btn" @tap.stop="express(items.order_id)">查看物流</button>
								<button class="action-btn recom" @tap.stop="againBuy(items.order_id)">再次购买</button>
							</view>
							<!-- 交易关闭 -->
							<view class="action-box b-t" v-if="items.status == 6">
								<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
								<button class="action-btn recom" @tap.stop="againBuy(items.order_id)">再次购买</button>
							</view>
						</view>
					</navigator>

					<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>

				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- app选择支付方式 -->
		<choosePay ref="choosePay" @confirm="confirm"></choosePay>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad class="passkeyborad" :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import {
		orderList,
		orderPay,
		orderCancel,
		orderAgain,
		orderTake
	} from '@/api/mall.js'
	import {
		checkPassword
	} from "@/api/user.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty/empty";
	import wechat from '@/common/wechat.js'
	import choosePay from '@/components/choosePay/choosePay.vue'
	export default {
		components: {
			uniLoadMore,
			empty,
			passkeyborad,
			choosePay
		},
		data() {
			return {
				emptyShow: false,
				tabCurrentIndex: 0,
				navList: [{
						state: '',
						text: '全部'
					},
					{
						state: 0,
						text: '待付款'
					},
					{
						state: 1,
						text: '待发货'
					},
					{
						state: 2,
						text: '待收货'
					},
					{
						state: 3,
						text: '待评价'
					},
					// {
					// 	state: -3,
					// 	text: '退换/售后'
					// }
				],
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				ordersList: [],
				limit: 6,
				page: 1,
				keys: '',
				state: null,
				provider: "wxpay",
				paytype: "weixin",
				// #ifdef MP-WEIXIN
				payStatus: "routine",
				// #endif
				// #ifdef APP-PLUS
				payStatus: "app",
				// #endif
				// #ifdef H5
				payStatus: "weixin",
				// #endif
				buy: false,
				keyboradShow: false,
				order_id: ''
			};
		},
		onLoad(options) {
			//订单状态|1=待收货,2=待评价,3=已完成
			if (options.state == 0) {
				this.loadData();
			} else {
				this.tabCurrentIndex = Number(options.state)
				//#ifndef MP-WEIXIN
				this.loadData();
				//#endif
			}
			if (options.buy) {
				this.buy = true;
			}
		},
		onShow() {
			if (uni.getStorageSync('doRefresh')) {
				this.loadStatus = "loading";
				this.page = 1;
				this.ordersList = [];
				this.loadData();
				uni.removeStorageSync('doRefresh')
			}
		},
		methods: {
			//获取订单列表
			async loadData() {
				let tabIndex = this.tabCurrentIndex;
				this.navList.forEach((val, index) => {
					if (index == tabIndex) {
						this.state = val.state
					}
				})
				orderList({
					type: this.state,
					page: this.page,
					limit: this.limit,
					// search: this.keys
				}).then(res => {
					uni.hideLoading()
					this.loadStatus = "more";
					this.ordersList.push.apply(this.ordersList, res.data);
					if (res.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.ordersList.length == 0) {
						this.contentText.contentnomore = ''
						this.emptyShow = true
					} else {
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},

			loadMore() {
				if (this.loadStatus == "more")
					(this.loadStatus = "loading"), this.loadData();
			},
			//swiper 切换
			changeTab(e) {
				this.loadStatus = "loading";
				this.page = 1;
				this.ordersList = [];
				this.emptyShow = false
				this.tabCurrentIndex = e.target.current;
				this.loadData();
			},
			//顶部tab点击
			tabClick(index) {
				this.emptyShow = false
				this.tabCurrentIndex = index;
			},
			// 去店铺
			goStore(id) {
				uni.navigateTo({
					url: `/mall/product/onlineStore?id=${id}`
				})
			},
			// 去商品详情
			goGoods(id,type) {
				console.log(type)
				if (type == "normal") {
					uni.navigateTo({
						url: `/mall/product/product?id=${id}`
					})
				} else if (type == "service_station"){
					uni.navigateTo({
						url: `/mall/enjoyMall/enjoyProduct?id=${id}`
					})
				}
				
			},
			// 再次购买
			againBuy(id) {
				orderAgain({
					uni: id
				}).then(res => {
					uni.navigateTo({
						url: "/mall/order/createOrder?cartId=" + res.data.cateId
					})
				})
			},
			// 申请退款
			refund(items) {
				if (items.is_return == 1) {
					return uni.showToast({
						icon: "none",
						title: "订单正在退货中，请到 退换/售后 查看详情"
					})
				}
				uni.navigateTo({
					url: "./refund/refund?oid=" + items.id + "&type=1"
				})
			},
			// 联系商家
			phoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 确认订单
			queren(id, is_return) {
				let _this = this
				if (is_return == 1) {
					return uni.showModal({
						content: "订单存在正在退货商品,无法确认收货",
						showCancel: false
					})
				}
				uni.showModal({
					content: "确认收货后，无法进行退货操作，是否确认收货？",
					confirmColor: "#FF1F2F",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({mask:true})
							orderTake({
								uni: id
							}).then(res => {
								uni.hideLoading()
								_this.loadStatus = "loading";
								_this.page = 1;
								_this.ordersList = [];
								_this.loadData();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},
			// 去评价
			goComment(id) {
				uni.navigateTo({
					url: "/mall/product/commentPost?orderId=" + id
				})
			},
			checkMoney(item) {
				this.order_id = item.order_id
				if (item.pay_price > 0) {
					//#ifndef APP-PLUS
					this.goPay(item.order_id)
					//#endif
					//#ifdef APP-PLUS
					this.$refs.choosePay.show()
					//#endif
				} else {
					this.keyboradShow = true
				}
			},
			finished(password) {
				uni.showLoading({
					mask:true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.goPay(this.order_id)
				})
			},
			confirm(e) {
				this.paytype = e.payType
				this.provider = e.provider
				this.goPay(this.order_id)
			},
			// 立即支付
			goPay(id) {
				uni.showLoading({
					mask:true
				})
				orderPay({
					uni: id,
					paytype: this.paytype,
					from: this.payStatus
				}).then(res => {
					uni.hideLoading()
					if (res.data.status == "ZERO_SUCCESS") {
						uni.showToast({
							title: "支付成功"
						})
						uni.setStorageSync('doRefresh',true)
						setTimeout(function() {
							uni.navigateTo({
								url: "/mall/order/orderDetail?id=" + res.data.result.order_id
							})
						}, 300);
					} else if (res.data.status == "WECHAT_PAY" || res.data.status == "ALIPAY") {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.result.jsConfig.timestamp,
							nonceStr: res.data.result.jsConfig.nonceStr,
							package: res.data.result.jsConfig.package,
							signType: res.data.result.jsConfig.signType,
							paySign: res.data.result.jsConfig.paySign,
							success: function(re) {
								uni.setStorageSync('doRefresh',true)
								uni.navigateTo({
									url: "/mall/order/orderDetail?id=" + res.data.result.order_id
								})
							}
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data.result.jsConfig,
							success: (e) => {
								uni.setStorageSync('doRefresh',true)
								uni.navigateTo({
									url: "/mall/order/orderDetail?id=" + res.data.result.order_id
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
						// #endif
						//#ifdef H5
						// h5支付
						let url = "/mall/order/orderDetail?id=" + res.data.result.order_id
						wechat.pay(res.data.result.jsConfig, url, false)
						//#endif
					} else if(res.data.status == "PAY_ERROR") {
						uni.showModal({
							content: res.msg,
							showCancel: false
						})
					}
				})
			},
			//删除订单
			deleteOrder(index) {

				uni.showLoading({
					mask:true,
					title: '请稍后'
				})
				setTimeout(() => {
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
			//取消订单
			cancelOrder(id) {
				uni.showLoading({mask:true})
				orderCancel({
					id: id
				}).then(res => {
					this.loadStatus = "loading";
					this.page = 1;
					this.ordersList = [];
					this.loadData();
				})
			},
			// 查看物流
			express(id) {
				uni.navigateTo({
					url: "./express?id=" + id
				})
			},
			keyboradClose() {
				this.keyboradShow = false
			},

		},
		onHide() {
			this.keyboradShow = false
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: #eee;
		height: 100%;
	}

	// .header{
	// 	display: flex;
	// 	padding: 90rpx 20rpx 20rpx;
	// 	justify-content: space-between;
	// 	background-color: #fff;
	// 	.icon-zuo{
	// 		font-size: 48rpx;
	// 	}

	// }
	.swiper-box {
		height: calc(100vh - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .05);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #303133;
			position: relative;

			&.current {
				color: #FB3737;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #FB3737;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		margin: 20rpx 30rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 10rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 30rpx;
			font-size: 28rpx;
			color: #303133;
			position: relative;

			.seller_logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.seller_name {
				max-width: 400rpx;
			}

			.icon-you {
				margin-top: 4rpx;
				margin-left: 10rpx;
				font-size: 24rpx;
			}

			.state {
				position: absolute;
				right: 0;
				top: 20rpx;
				color: #FB3737;
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 120rpx;
			padding: 20rpx;
			width: 100%;
			margin-left: -20rpx;
			white-space: nowrap;
			background-color: #f8f8f8;

			.goods-item {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20rpx;
			margin-left: -20rpx;
			width: 100%;
			background-color: #f8f8f8;

			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 0 0 24rpx;
				overflow: hidden;

				.title {
					font-size: 30rpx;
					color: #303133;
					line-height: 1;
				}

				.attr-box {
					font-size: 26rpx;
					color: #909399;
					display: flex;
					justify-content: space-between;
				}

				.price {
					font-weight: bold;
					text-align: right;
					font-size: 30rpx;
					color: #303133;

					&:before {
						content: '￥';
						font-size: 24rpx;
						margin: 0 2rpx 0 8rpx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 0;
			font-size: 24rpx + 2rpx;
			color: #909399;

			.num {
				margin: 0 8rpx;
				color: #303133;
			}

			.price {
				font-size: 32rpx;
				color: #FB3737;
				font-weight: bold;

				&:before {
					content: '￥';
					font-size: 24rpx;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
		}

		.action-btn {
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			color: #303133;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #FB3737;
				color: #fff;

				&:after {
					border-color: #FB3737;
				}
			}
		}

		.contact {
			position: absolute;
			left: 0;
			margin: 0;
		}
	}


	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__text {
		font-size: 28rpx;
		color: #999
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}

	.uni-load-more__img>view {
		position: absolute
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s
	}

	.load2 view:nth-child(1) {
		animation-delay: .13s
	}

	.load3 view:nth-child(1) {
		animation-delay: .26s
	}

	.load1 view:nth-child(2) {
		animation-delay: .39s
	}

	.load2 view:nth-child(2) {
		animation-delay: .52s
	}

	.load3 view:nth-child(2) {
		animation-delay: .65s
	}

	.load1 view:nth-child(3) {
		animation-delay: .78s
	}

	.load2 view:nth-child(3) {
		animation-delay: .91s
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}
	.passkeyborad {
		position: relative;
		z-index: 99;
	}
</style>
